<!DOCTYPE html>
<html>
<head>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <style type="text/css">
      html, body, #map {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>
    <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"
            type="text/javascript"></script>
    <script type="text/javascript">
        
        ymaps.ready(init);

        var yMap;

        function init()
        {
            yMap = new ymaps.Map('map', {
                    center: [48.526, 39.297],
                    zoom: 10
                });


            yMap.controls.add("zoomControl")
                .add("miniMap")
                .add("scaleLine")
                .add("searchControl")
                .add("typeSelector");

            yMap.events.add('click', function (e)
                {
                    var position = e.get('coordPosition');
                    webinterface.onMapClicked(position.toString());
                }
            );

        }
        
        function addPoint(x, y)
        {
            myPlacemark = new ymaps.Placemark([x.toString(), y.toString()],
                {
                    balloonContentHeader : 'Наименование торговой точки',
                    balloonContent: '<img src="qrc:/markers/img/blue_basket.png" />',
                    hintContent: "Торговая точка",
                    balloonContentFotter : 'Часы работы: 8-20'
                },
                {
                    draggable: true,
                    iconImageHref: "qrc:/markers/img/blue_marker.png",
                    iconImageSize: [24, 24], // размеры картинки
                    iconImageOffset: [-12, -24] // смещение картинки
                });

            yMap.geoObjects.add(myPlacemark);
        }
      </script>
</head>
<body>
<div id="map"></div>
</body>
</html>